<template>
    <h2>欢迎使用vite+vue3+ts+pinia+vue-router4</h2>
    <div>{{ userStore.name }}</div>
    <div>{{ '失去响应式的数据：' + name }}</div>
    <div>{{ userStore.hiddenPhone }}</div>
    <button @click="update">修改名字</button>
    <button @click="runMyOnfo">调用其他共享数据</button>
    <div>{{ info }}</div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import { useUserStore } from '@/store/user';
    import { storeToRefs } from 'pinia';

    const userStore = useUserStore();

    export default defineComponent({
        name: 'UsePinia',
        setup() {
            const update = () => {
                // 方法1调用actions方法
                userStore.updateName('外新人');

                // // 方法2
                // userStore.name = '外新人';

                // // 方法3 同时改变多个数据
                // userStore.$patch({
                //     name: '外新人'
                // });

                // // 方法4 $patch传递函数
                // userStore.$patch((state: { name: string }) => {
                //     state.name = '外新人';
                // });
            };

            const runMyOnfo = () => {
                userStore.getMyInfo();
            };

            // const { name } = userStore; // 直接解构的话name存为栈，丢失了响应式

            const { name } = storeToRefs(userStore); // 直接解构的话name存为栈，丢失了响应式

            return {
                userStore,
                update,
                name,
                info: userStore.getMyInfo(),
                runMyOnfo
            };
        }
    });
</script>
